<template>
	<div>
		<div style="margin: 10px 0">
			<el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='我再想想' icon="el-icon-info"
				icon-color="red" title="您确定批量删除这些数据吗？" @confirm="delBatch">
				<el-button type="danger" plain slot="reference">批量删除 <i class="el-icon-remove-outline"></i></el-button>
			</el-popconfirm>
		</div>
		<el-table v-loading="loading" :data="tableData" stripe @selection-change="handleSelectionChange"
			:header-cell-style="{'padding-left':'4px','padding-right':'4px'}">
			<el-table-column fixed prop="createTime" label="日期" width="100">
			</el-table-column>
			<el-table-column prop="user" label="姓名">
				<template slot-scope="scope">
					<span>{{scope.row.user.nickname}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="seat" label="座位号">
				<template slot-scope="scope">
					<span>{{scope.row.seat.seatNum}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="city" label="楼层">
				<template slot-scope="scope">
					<span>{{scope.row.seat.floor}}楼</span>
				</template>
			</el-table-column>

			<el-table-column label="操作" width="180" align="center">
				<template slot-scope="scope">
					<div class="table-row-options-warp">
						<el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info"
							icon-color="red" title="您确定删除这条数据吗？" @confirm="del(scope.row.id)">
							<span slot="reference">删除</span>
						</el-popconfirm>
					</div>
				</template>
			</el-table-column>
		</el-table>

		<div style="padding: 10px 0">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
				:page-sizes="[2, 5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
				:total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		name: "Seat",
		props: {
			themeStatus: Number,
		},
		data() {
			return {
				loading: true,
				tableData: [],
				total: 0,
				pageNum: 1,
				pageSize: 10,
				multipleSelection: [],
			}
		},
		created() {
			this.load()
		},
		methods: {
			deleteRow(index, rows) {
				this.$confirm("确定移除吗？", "提示", {
					type: 'info'
				}).then(() => {
					this.request.delete('/delete').then(res => {
						if (res.code == '200') {
							rows.splice(index, 1);
						}
					})
				}).catch(() => {
					this.$message.info("取消操作")
				})
			},
			load() {
				this.request.get("/order/page", {
					params: {
						pageNum: this.pageNum,
						pageSize: this.pageSize,
					}
				}).then(res => {

					if (res.code == "200") {
						setTimeout(() => {
							this.loading = false
							this.tableData = res.data.records
							this.total = res.data.total
						}, 200);
					} else {
						this.$message.warning(res.msg)
					}
				})
			},
			cancel(id) {
				this.request.get("/seat/cancel/" + id).then(res => {
					if (res.code === '200') {
						this.load()
						this.$message.success("取消预约成功")
					} else {
						this.$message.error(res.msg)
					}
				})
			},
			del(id) {
				this.request.delete("/seat/" + id).then(res => {
					if (res.code === '200') {
						this.$message.success("删除成功")
						this.load()
					} else {
						this.$message.error("删除失败")
					}
				})
			},
			handleSelectionChange(val) {
				console.log(val)
				this.multipleSelection = val
			},
			delBatch() {
				if (!this.multipleSelection.length) {
					this.$message.error("请选择需要删除的数据")
					return
				}
				let ids = this.multipleSelection.map(v => v.id) // [{}, {}, {}] => [1,2,3]
				this.request.post("/order/del/batch", ids).then(res => {
					if (res.code === '200') {
						this.$message.success("批量删除成功")
						this.load()
					} else {
						this.$message.error("批量删除失败")
					}
				})
			},

		}
	}
</script>


<style scoped>
	.el-button:focus,
	.el-button:hover {
		background: var(--font-color-primary);
		border-color: var(--font-color-primary);
		border-color: var(--back-color-primary);
		color: #fff;
	}

	.el-button--primary {
		color: var(--font-color-primary);
		background-color: var(--back-color-primary);
		border-color: var(--back-color-primary);
	}

	.el-button--primary:focus,
	.el-button--primary:hover {
		background: var(--font-color-primary);
		border-color: var(--font-color-primary);
		border-color: var(--back-color-primary);
		color: #fff;
	}


	.el-button--danger {
		color: rgb(214, 48, 49);
		background-color: rgb(214, 48, 49, 0.1);
		border-color: rgb(214, 48, 49, 0.1);
	}

	.el-button--danger:focus,
	.el-button--danger:hover {
		background: rgb(214, 48, 49);
		border-color: rgb(214, 48, 49);
		border-color: rgb(214, 48, 49, 0.1);
		color: #fff;
	}

	.table-row-options-warp span {
		cursor: pointer;
		color: var(--font-color-primary)
	}

	.table-row-options-warp span:last-child {
		cursor: pointer;
		color: #d63031;
	}
</style>